<template>
  <div class="auth-field-config">
    <BasicTable @register="registerTable">
      <template #switch="{ text, record }">
        <a-switch size="small" :checked="record.status === 1" @change="(flag) => onUpdateStatus(flag, record)" />
      </template>
      <template #list="{ text, record }">
        <a-checkbox title="可见" :checked="record.listShow" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 1)" />
      </template>
      <template #form="{ text, record }">
        <a-checkbox title="可见" :checked="record.formShow" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 2)" />
        <a-checkbox title="可编辑" :checked="record.formEditable" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 3)" />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { authFieldLoadData, authFieldUpdateStatus, authFieldUpdateCheckbox } from '../auth.api';
  import { authFieldColumns } from '../auth.data';

  export default defineComponent({
    name: 'AuthFieldConfig',
    components: { BasicTable },
    props: {
      headId: {
        type: String,
        default: '',
        required: true,
      },
    },
    emits: ['update:authFields'],
    setup(props, { emit }) {
      const cgformId = ref('');
      const [registerTable, { reload }] = useTable({
        api: loadData,
        rowKey: 'code',
        bordered: true,
        columns: authFieldColumns,
        showIndexColumn: false,
      });
      watch(
        () => props.headId,
        (headId) => {
          cgformId.value = headId.split('?')[0];
          reload().catch(() => null);
        },
        { immediate: true }
      );
      async function loadData(params) {
        const exclude = ['id'];
        let data = await authFieldLoadData(cgformId.value, params);
        let fields = [];
        let filterData = [];
        data.forEach((item) => {
          if (exclude.indexOf(item.code) < 0) {
            if (item.isShowForm == 1 || item.isShowList == 1) {
              filterData.push(item);
            }
            if (item.dbIsPersist == 1) {
              fields.push({ text: item.title, value: item.code });
            }
          }
        });
        emit('update:authFields', fields);
        return filterData;
      }
      async function onUpdateStatus(flag, record) {
        await authFieldUpdateStatus({
          cgformId: cgformId.value,
          code: record.code,
          status: flag ? 1 : 0,
        });
        if (!(record.formEditable || record.formShow || record.listShow)) {
          record.formEditable = true;
          record.formShow = true;
          record.listShow = true;
        }
        record.status = Math.abs(record.status - 1);
      }
      async function onCheckboxChange(event, record, switchFlag) {
        let checked = event.target.checked;
        await authFieldUpdateCheckbox({
          cgformId: cgformId.value,
          code: record.code,
          switchFlag,
          listShow: checked,
          formShow: checked,
          formEditable: checked,
        });
        if (switchFlag == 1) {
          record.listShow = checked;
        } else if (switchFlag == 2) {
          record.formShow = checked;
        } else if (switchFlag == 3) {
          record.formEditable = checked;
        }
      }
      return { registerTable, onUpdateStatus, onCheckboxChange };
    },
  });
</script>
<style scoped>
  .auth-field-config .ant-checkbox + span {
    padding-left: 2px;
  }
</style>
